<style lang="less" scoped>
    @import '../../styles/common.less';
    @import '../../styles/loading.less';
    .table-Row {
        display: -webkit-box;
        .titele {
            background-color: #F0F0F0;
            border: 1px solid #D0D0D0;
            font-size: 15px;
            display: flex;
            justify-content:flex-end;
            align-items:Center;
            min-height: 47px;
            font-weight: 700;
            margin-right:-1px;
            margin-bottom:-1px;
            height: auto;
        }
        .content {
            display: flex;
            align-items:Center;
            justify-content:center;
            border: 1px solid #D0D0D0;
            margin-right:-1px;
            margin-bottom:-1px;
        }
        .content div {
            margin: 5px 10px 5px 10px;
        }
    }
</style>

<template>
    <div>
        <Row class="table-Row">
            <Col span="4" class="titele">班级名称：</Col>
            <Col span="8" class="content">
            <span>{{entity.name}}</span>
            </Col>
            <Col span="4" class="titele">教室名称：</Col>
            <Col span="8" class="content">
            <span>{{entity.classRoom}}</span>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">上课教师：</Col>
            <Col span="8" class="content">
            <span>{{entity.mainTeacherName}}</span>
            </Col>
            <Col span="4" class="titele">代课教师：</Col>
            <Col span="8" class="content">
            <span>{{entity.viceTeacherName}}</span>
            </Col>
        </Row>
        <Row class="table-Row">
            <Col span="4" class="titele">班级人员：</Col>
            <Col span="8" class="content">
            <span>{{entity.people}}</span>
            </Col>
            <Col span="4" class="titele">标准费用：</Col>
            <Col span="8" class="content">
            <span>{{entity.teachCost}}</span>
            </Col>
        </Row>
    </div>
</template>
<script >
    import util from '@/libs/util';
    import Cookies from 'js-cookie';

    export default {
        name: 'exportable-table',
        props: {
            classesid: ''
        },
        data () {
            return {
                dataList: [],
                addVisible: false,//新增弹窗的显示和隐藏
                areaList: [],//区域列表
                queryData: {},//查询表单数据
                departmentList: [],
                marjorFatherList: [],
                majorLevelList: [],
                classSeasonList: [],
                classApplyList: [],
                classList: [],
                selection: [],//选中的行
                modelVisible: false,
                entity: {},//查看详情的实体类
            };
        },
        watch: {
            classesid (newVal, oldVal) {
                if (newVal) {
                    this.doQuery();
                    this.loadDetail();
                }
            }
        },
        methods: {
            doQuery () {
                util.ajax.post('/base/class/list', util.toFormData(
                    { classesid: this.classesid }
                )).then(res => {
                    console.log(res);
                    if (res.data.data) {
                        this.dataList = res.data.data.list;
                        this.total = res.data.data.total;
                    }
                });
            },
            loadDetail () {
                this.modelVisible = true;
                util.ajax.post('/base/class/detail', util.toFormData(
                    {id: this.classesid}
                )).then(res => {
                    if (res.data.code == 200) {
                        this.entity = data;
                    }
                });
            }
        }
    };
</script>
